<template>
  <div class="profile_edit">
    <div class="topNav">
      <el-page-header @back="goBack" content="修改个人资料"> </el-page-header>
    </div>
    <div class="main">
      <el-card class="box-card">
        <el-form
          label-position="top"
          :model="mess.user"
          :rules="rules"
          ref="ruleForm"
          label-width="auto"
        >
          <el-row>
            <el-col :span="10">
              <el-form-item label="公司名称" prop="org_id">
                <el-select
                  v-model="mess.user.org_id"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入公司关键词"
                  :remote-method="remoteMethod"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.company_id"
                    :label="item.company_name"
                    :value="item.company_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="mess.user.username" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="mess.user.password"
                  clearable
                  type="password"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" style="margin-left: 8%">
              <el-form-item label="确认密码" prop="repassword">
                <el-input
                  v-model="mess.user.repassword"
                  clearable
                  type="password"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="mess.user.nickname" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="联系手机" prop="telphone">
                <el-input v-model="mess.user.telphone" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" style="margin-left: 8%">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="mess.user.email" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn">
          <el-button plain style="float: left" @click="goBack">返回</el-button>
          <el-button
            type="primary"
            round
            style="float: right"
            @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Profile_Edit",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.mess.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      orgname: "",
      mess: {
        userId: 1,
        user: {
          org_id: null,
          username: "",
          password: "",
          repassword: "",
          nickname: "",
          telphone: "",
          email: "",
        },
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        repassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        telphone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  created() {
    this.mess.userId = this.$store.state.userId;
    this.orgname = this.$store.state.userMess.orgname;
    this.mess.user.org_id = this.$store.state.userMess.org_id;
    this.mess.user.username = this.$store.state.userMess.username;
    this.mess.user.nickname = this.$store.state.userMess.nickname;
    this.mess.user.telphone = this.$store.state.userMess.telphone;
    this.mess.user.email = this.$store.state.userMess.email;
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("此操作将修改用户个人信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              const data = {
                userId: this.mess.userId,
                user: {
                  org_id: this.mess.user.org_id,
                  username: this.mess.user.username,
                  password: this.mess.user.password,
                  nickname: this.mess.user.nickname,
                  telphone: this.mess.user.telphone,
                  email: this.mess.user.email,
                },
              };
              this.axios
                .post("/user/changeInfo", data, {
                  "Content-Type": "application/json",
                })
                .then((res) => {
                  if (res.data.code === "200") {
                    this.$message({
                      message: res.data.msg,
                      type: "success",
                    });
                    this.goBack();
                  } else {
                    this.$message.error(res.data.msg);
                  }
                })
                .catch((err) => {
                  console.error(err);
                  this.$message.error("修改用户资料失败");
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改",
              });
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "warning",
          });
          return false;
        }
      });
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.axios
            .get("/company/searchCompany", {
              params: {
                companyName: query,
                companyDirector: query,
              },
            })
            .then((res) => {
              this.list = res.data.data.list;
              this.loading = false;
              this.options = this.list.filter((item) => {
                return (
                  item.company_name.toLowerCase().indexOf(query.toLowerCase()) >
                  -1
                );
              });
            }, 200);
        });
      } else {
        this.options = [];
      }
    },
  },
};
</script>

<style scoped>
.profile_edit {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #f6f9fd;
}
.topNav {
  position: relative;
  height: 10vh;
  width: 100%;
  border-bottom: 1px solid #e2e3e4;
}
.el-page-header {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translate(0, -50%);
}
.main {
  padding: 5px 20px 18px 20px;
}

.box-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 85vh;
  padding: 25px;
  text-align: left;
}
.box-card /deep/ .el-form-item {
  margin-bottom: 1vh;
}
.box-card >>> .el-form-item__label {
  text-align: left;
}
.btn {
  margin: 35px auto;
  width: 200px;
  height: 80px;
}
</style>